<template>
  <span class="drop-plus">
    <el-dropdown trigger="click">
      <el-button
        type="text"
        :disabled="disabled"
      >
        <el-tooltip placement="top" content="添加兄弟/子节点">
          <i class="el-icon-plus plus"></i>
        </el-tooltip>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>
            <span
              @click="addFieldAction({ eventType: 'add-field', isChild: false })"
              >兄弟节点</span
            >
          </el-dropdown-item>
          <el-dropdown-item>
            <span @click="addFieldAction({ eventType: 'add-field', isChild: true })"
              >子节点</span
            >
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </span>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "DropPlus",
  components: {},
  props: {
    prefix: {
      type: Array,
      default: () => [],
    },
    name: {
      type: String,
      default: "",
    },
    // 禁用
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { emit }) {
    const addFieldAction = (...args) => {
      emit("addField", ...args);
    };
    return {
      addFieldAction,
    };
  },
});
</script>

<style scoped>
.drop-plus {
  margin-left: 6px;
}
</style>
